<template>
    <div class='details'>
        <DetailsNav @detailsNav='detailsNav' ref='detailsNav'></DetailsNav>
         <BScroll class='detailsScroll' ref='detailsBScroll' @BScroll='detailsScroll'>
            <!-- @imgload='imgload' -->
            <DetailsChart :arrimg='imgsrc' :scrollrefresh='scrollrefresh'></DetailsChart>
            <Detailsword :word='detailsWord'></Detailsword>
            <DetailsParm :parms='detailsParams' ref='detailsParm' @imgload='imgload'></DetailsParm>
            <DetailsComment :comment='detailsComment' @commentPop='commentPop' ref='detailsComment' @imgload='imgload'></DetailsComment>
            <Recomment :recomment='detailsRecomment' ref="recomment"></Recomment>
            
        </BScroll>
        <DetailsTop @click.native="backTop" v-show="isShow"></DetailsTop>
        <DetailsBottom :good='goods' :detailsGoods='detailsGoods'></DetailsBottom>
    </div>
</template>

<script>
import DetailsNav from '../../views/details/DetailstNav.vue'
import DetailsChart from './detailsChart.vue'
import Detailsword from './detailsWord.vue'
import DetailsParm from './parm.vue'
import BScroll from '../../components/common/BScroll/BScroll.vue'
import DetailsComment from './detailsComment.vue'
import Recomment from './recomment.vue'
import DetailsBottom from './detailsBottom.vue'
import DetailsTop from '../../components/content/top/Top.vue'
export default {
    name:'Details',
    components:{
         DetailsNav,
          DetailsChart,
          Detailsword,
          DetailsParm,
         BScroll,
         DetailsComment,
         Recomment,
         DetailsBottom,
         DetailsTop
    },
    data(){
        return{
         //   scrollrefresh:null,
            goods:null,
            isshowTitle:false,
            scrollto:[],
            isTrue:true,
            detailsWord:'',
            imgsrc:[],
            detailsIndex:0,
            detailspops:'',
            detailsRecomment:{
                recomment: [
                        {          
                           list: [
                           {
                              imgs: require("../../assets/img/detailsRecomment/1.webp"),
                              price: "￥79",
                              prices: "￥99",
                           },
                           {
                              imgs: require("../../assets/img/detailsRecomment/2.webp"),
                              price: "￥59",
                              prices: "￥99",
                           },
                           {
                              imgs: require("../../assets/img/detailsRecomment/3.webp"),
                              price: "￥199",
                              prices: "￥399",
                           },
                           {
                              imgs: require("../../assets/img/detailsRecomment/4.webp"),
                              price: "￥299",
                              prices: "￥599",
                           }
                           ]
                        }
                     ]},
             detailsCommentPop:[
                {
               headimg:require('../../assets/img/detailsComment/2.jpeg'),
               name:'满天星辰',
               comment:'包装精美',
               time:1545265024000
            },
            {
               headimg:require('../../assets/img/detailsComment/3.jpeg'),
               name:'雾',
               comment:'物流快',
               time:1545274502020
            },
            {
               headimg:require('../../assets/img/detailsComment/4.jpeg'),
               name:'落水三千',
               comment:'衣服不错',
               time:1545984020009
            }
             ],
            detailsComment:[
               {
               headimg:require('../../assets/img/detailsComment/1.jpeg'),
               name:'棒棒糖闯天涯',
               comment:'物美价廉，穿着很舒服',
               time:1545264001000
            }
            
            ],
            detailsParams:{
               // detailsTr:['尺码','颜色'],
               detailsTd:[
                  ['S','M','L','XL','XLL'],
                  ['红色','黑色','白色','蓝色','绿色']
                  ]
               },
            detailsGoods:{
                pop:{
                    imgsrc:[
                        {list:[
                            {imgs:require('../../assets/img/scroll/1.webp')},
                            {imgs:require('../../assets/img/popdetails/1.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/2.webp')},
                            {imgs:require('../../assets/img/popdetails/2.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/3.webp')},
                            {imgs:require('../../assets/img/popdetails/3.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/4.webp')},
                            {imgs:require('../../assets/img/popdetails/4.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/5.webp')},
                            {imgs:require('../../assets/img/popdetails/5.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/6.webp')},
                            {imgs:require('../../assets/img/popdetails/6.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/7.webp')},
                            {imgs:require('../../assets/img/popdetails/7.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/8.webp')},
                            {imgs:require('../../assets/img/popdetails/8.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/26.webp')},
                            {imgs:require('../../assets/img/popdetails/9.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/27.webp')},
                            {imgs:require('../../assets/img/popdetails/10.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/28.webp')},
                            {imgs:require('../../assets/img/popdetails/11.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/29.webp')},
                            {imgs:require('../../assets/img/popdetails/12.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/30.webp')},
                            {imgs:require('../../assets/img/popdetails/13.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/31.webp')},
                            {imgs:require('../../assets/img/popdetails/14.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/32.webp')},
                            {imgs:require('../../assets/img/popdetails/15.webp')},
                         ]},
                         {list:[
                            {imgs:require('../../assets/img/scroll/33.webp')},
                            {imgs:require('../../assets/img/popdetails/16.webp')},
                         ]},
                    ],
                    detail:[
                        '白色皮衣外套女短款2021年春季春秋百搭韩版宽松矮小个子小皮夹克',
                        '短款卫衣2021新款女薄款黄色韩版宽松女士秋季高腰连帽外套ins潮',
                        '浅蓝色短袖2021年新款女宽松韩版纯棉百搭中长款大码显瘦上衣t恤',
                        '湖灵 chic韩风蓝条纹宽松衬衫女韩范秋款上衣港味小清新衬衣女装',
                        '坑条拉链针织开衫女欧美秋冬紧身',
                        '深棕色风衣过膝宽松秋装韩版高个子休闲西服',
                        '长袖衬衫女春秋新款职业洋气时尚2021上衣休闲高级感轻奢',
                        '花花公子长袖t恤男秋季',
                        '恒源祥中年妈妈毛衣女秋冬半高领针织短款内搭线衣',
                        '小个子收腰短款风衣女气质休闲薄款外套春秋新款2021欧洲站潮',
                        '短袖t恤女纯棉女装2021年新款夏季女士',
                        '毛衣套头宽松外穿复古重工日系慵懒风麻花针织衫',
                        '纯色秋季全棉内搭打底衫圆领宽松潮流秋',
                        '连帽卫衣vintage阿美咔叽纯色运动外套男潮',
                        '裤女高腰显瘦显高宽松黑色毛边学生小个子春秋',
                        '裤男休闲直筒裤宽松直筒九分裤子'
                    ]
                   
                },
                new:{
                     imgsrc:[
                          {list:[
                            {imgs:require('../../assets/img/scroll/9.webp')},
                            {imgs:require('../../assets/img/newDetails/1.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/10.webp')},
                            {imgs:require('../../assets/img/newDetails/2.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/11.webp')},
                            {imgs:require('../../assets/img/newDetails/3.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/12.webp')},
                            {imgs:require('../../assets/img/newDetails/4.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/13.webp')},
                            {imgs:require('../../assets/img/newDetails/5.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/14.webp')},
                            {imgs:require('../../assets/img/newDetails/6.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/15.webp')},
                            {imgs:require('../../assets/img/newDetails/7.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/16.webp')},
                            {imgs:require('../../assets/img/newDetails/8.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/34.webp')},
                            {imgs:require('../../assets/img/newDetails/9.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/35.webp')},
                            {imgs:require('../../assets/img/newDetails/10.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/36.webp')},
                            {imgs:require('../../assets/img/newDetails/11.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/37.webp')},
                            {imgs:require('../../assets/img/newDetails/12.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/38.webp')},
                            {imgs:require('../../assets/img/newDetails/13.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/39.webp')},
                            {imgs:require('../../assets/img/newDetails/14.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/40.webp')},
                            {imgs:require('../../assets/img/newDetails/15.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/41.webp')},
                            {imgs:require('../../assets/img/newDetails/16.webp')},
                         ]},
                     ],
                     detail:[
                         '2021年新款春秋季海宁休闲皮衣女短款显瘦机车皮夹克',
                         '2021早秋职业名媛气质小香时尚法式珍珠西服套装',
                         '范洛2021秋季新款西装领羊毛鹅',
                         '牛仔衣男港风潮流夹克',
                         '雪貂绒毛重工钉花',
                         'Athief潮牌oversize连帽卫衣男潮情侣装ins潮流',
                         '秋冬2021新款加厚连帽上衣宽松韩版运动风开衫',
                         '2021春季韩国高级感宽松设计感网红女西服上衣',
                         '宽松西装时髦显瘦',
                         '2021春季新款加绒卫衣女连帽宽松韩版原创可爱少女大白鹅',
                         '冲锋衣男潮牌连帽工装立领',
                         '女秋冬中长款大衣赫本英伦风',
                         '复古bf风宽松牛仔',
                         '女士修身2021新款大码中长款大衣',
                         '男士夹克加绒加厚纯',
                         '女士秋冬薄毛呢圆领短'
                     ]
                },
                select:{
                     imgsrc:[
                          {list:[
                            {imgs:require('../../assets/img/scroll/25.webp')},
                            {imgs:require('../../assets/img/selectDetails/1.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/18.webp')},
                            {imgs:require('../../assets/img/selectDetails/2.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/19.webp')},
                            {imgs:require('../../assets/img/selectDetails/3.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/20.webp')},
                            {imgs:require('../../assets/img/selectDetails/4.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/21.webp')},
                            {imgs:require('../../assets/img/selectDetails/5.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/22.webp')},
                            {imgs:require('../../assets/img/selectDetails/6.webp')},
                         ]}, {list:[
                            {imgs:require('../../assets/img/scroll/23.webp')},
                            {imgs:require('../../assets/img/selectDetails/7.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/24.webp')},
                            {imgs:require('../../assets/img/selectDetails/8.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/42.webp')},
                            {imgs:require('../../assets/img/selectDetails/9.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/43.webp')},
                            {imgs:require('../../assets/img/selectDetails/10.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/44.webp')},
                            {imgs:require('../../assets/img/selectDetails/11.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/45.webp')},
                            {imgs:require('../../assets/img/selectDetails/12.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/46.webp')},
                            {imgs:require('../../assets/img/selectDetails/13.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/47.webp')},
                            {imgs:require('../../assets/img/selectDetails/14.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/48.webp')},
                            {imgs:require('../../assets/img/selectDetails/15.webp')},
                         ]},
                          {list:[
                            {imgs:require('../../assets/img/scroll/49.webp')},
                            {imgs:require('../../assets/img/selectDetails/16.webp')},
                         ]}
                     ],
                     detail:[
                         '衬衫迷彩服春秋男工地劳保工作服潮男上衣',
                         '卫衣女加绒秋冬2021新款慵懒风套头上衣宽松韩版连帽',
                         '卫衣女加绒',
                         '女秋冬机车酷港风pu皮夹克',
                         '秋冬季2021新款网红炸街垂感休闲小西服',
                         '飞行夹克短款棉衣',
                         '卫衣男士纯棉宽松加绒加厚带帽衫',
                         '卫衣女加厚2021新款秋冬韩版宽松加绒连帽学生',
                         '2021秋季新款复古设计感小众小西服上衣宽松',
                         '工装复古春秋季休闲牛仔夹克',
                         '拉链高领连体上衣女长袖紧身百搭显瘦外穿T恤潮',
                         '复古bf风宽松牛仔',
                         '2021早秋职业名媛气质小香时尚法式珍珠西服套装',
                         '小西装中长款职业宽松休闲西服上衣',
                         '针织衫开衫撞色四道杠条纹上衣短',
                         '加绒厚宽松慵懒风小个子'
                     ]
                }
            }
            
        }
    },
   //    activated(){
   //       this.$bus.$on('shopping',(goods)=>{
   //              this.goods=goods
   //          })
   //          console.log(this.goods)
   //  },
    computed:{
      isShow(){
         return this.isshowTitle<=-433
    }
  },
    methods:{
        backTop(){
            this.$refs.detailsBScroll.scrollTo(0,0,1000)
       },
       scrollrefresh(){
             // 刷新
        return this.$refs.detailsBScroll.BScroll.refresh()
       },
       detailsScroll(position){
         //  console.log(position)
         //     console.log( this.scrollto)
         // console.log(-position.y)
         //   console.log(this.scrollto[1] < -position.y < this.scrollto[2])
            this.isshowTitle=position.y
          for(let i=0;i<this.scrollto.length;i++){
           
            if(this.scrollto[i] < -position.y && -position.y< this.scrollto[i+1]){
               this.$refs.detailsNav.counterIndex=i
            }else if(this.scrollto[i] < -position.y&&i===this.scrollto.length-1){
                this.$refs.detailsNav.counterIndex=i
            }
         

          }
       },
       imgload(){              
              this.$refs.detailsBScroll.BScroll.refresh()
        
         
       },
       commentPop(){
         
          if(this.isTrue){
            this.detailsComment.push(...this.detailsCommentPop);
            this.isTrue=false;
          }
           
            this.$nextTick(()=>{
            this.scrollto=[]
            this.scrollto.push(0)
            this.scrollto.push(this.$refs.detailsParm.$el.offsetTop)
            this.scrollto.push(this.$refs.detailsComment.$el.offsetTop)
            this.scrollto.push(this.$refs.recomment.$el.offsetTop)
         //  console.log(this.scrollto)
         //  this.$refs.detailsBScroll.BScroll.scrollTo(0,-(this.scrollto[index]),500)
        })
      //   this.$refs.detailsBScroll.BScroll.refresh()
       },
       detailsNav(index){
          this.$refs.detailsBScroll.BScroll.refresh()
         //  console.log(this.$refs.detailsBScroll.BScroll)
        this.$nextTick(()=>{
            this.scrollto=[]
            this.scrollto.push(0)
            this.scrollto.push(this.$refs.detailsParm.$el.offsetTop)
            this.scrollto.push(this.$refs.detailsComment.$el.offsetTop)
            this.scrollto.push(this.$refs.recomment.$el.offsetTop)
         //  console.log(this.scrollto)
          this.$refs.detailsBScroll.BScroll.scrollTo(0,-(this.scrollto[index]+2),500)
        })
       }
    },
    created(){
       this.$bus.$on('shoppings',(good)=>{
            this.goods=good;
         })
         // console.log(this.goods)
    },
   mounted(){
      // this.$bus.$on('details',()=>{
      //    this.detailsNav()
      // })
    //    console.log(this.$route.params.index)
    //    console.log(typeof(this.$router.params.index))
        this.detailsIndex=this.$route.params.index;
        this.detailspops=this.$route.params.pops;
        this.detailsWord=this.detailsGoods[this.detailspops].detail[this.detailsIndex]
        this.imgsrc=this.detailsGoods[this.detailspops].imgsrc[this.detailsIndex].list;
      
         
         // this.$bus.$on('shoppings',(good)=>{
         //    this.goods=good
         // })
         // this.$nextTick(()=>{

         //    this.scrollto=[]
         //    this.scrollto.push(0)
         //    this.scrollto.push(this.$refs.detailsParm.$el.offsetTop)
         //    this.scrollto.push(this.$refs.detailsComment.$el.offsetTop)
         //    this.scrollto.push(this.$refs.recomment.$el.offsetTop)
         //    console.log(this.scrollto)
         // })
   }
}
</script>

<style scoped>
   .details{
      height: 100vh;
   }
   .detailsScroll{
      height: calc(100% - 103px);
      margin-top: 8px;
      /* overflow: hidden; */
   }
</style>